<template>
  <view class="second2">
    <view class="bottom-inner">
      <view class="bottom-title">第二项信息</view>
      <view class="second-content">
        <view class="left">
          <view class="second-title">
            <view class="cu-bar bg-white margin-top-xs">
              <view class="action sub-title">
                <text class="title-inner">侧面观</text>
                <text class="text-ABC text-blue">side observe</text>
              </view>
            </view>
          </view>
           <view v-for="(item, index) in sideList" :key="index">
              <QSWavesButton 
              :btnStyle="'margin: 10px;border:none !important;' + ((item.itemDetail && item.item !== '均正常') ? 'background:#B71C1C;color: #fff;font-weight: 600': (item.itemDetail && item.item === '均正常') ? 'background:#00796b;color: #fff;font-weight: 600': 'background: #00796b10;color:#333;')" 
              :size="item.size" 
              :btnType="item.type" 
              :txt="item.item"
              :wavesColor="item.wavesColor" 
              :disabled="item.disabled"
              :loading="item.loading"
              :plain="item.plain"
              :formType="item.formType"
              :openType="item.openType"
              :hoverStartTime="item.hoverStartTime"
              :hoverStayTime="item.hoverStayTime"
              :hoverClass="item.hoverClass"
              :preIconType="item.preIconType"
              @click="chooseHandleSide(item)" 
              >slot传入内容</QSWavesButton>
          </view>
        </view>
        <view class="left right">
          <view class="second-title">
            <view class="cu-bar bg-white margin-top-xs">
              <view class="action sub-title">
                <text class="title-inner">正面观</text>
                <text class="text-ABC text-blue">front observe</text>
              </view>
            </view>
          </view>
           <view v-for="(item, index) in frontList" :key="index">
              <QSWavesButton 
              :btnStyle="'margin: 10px;border:none !important;' + ((item.itemDetail && item.item !== '均正常') ? 'background:#B71C1C;color: #fff;font-weight: 600': (item.itemDetail && item.item === '均正常') ? 'background:#00796b;color: #fff;font-weight: 600': 'background: #00796b10;color:#333;')" 
              :size="item.size" 
              :btnType="item.type" 
              :txt="item.item"
              :wavesColor="item.wavesColor" 
              :disabled="item.disabled"
              :loading="item.loading"
              :plain="item.plain"
              :formType="item.formType"
              :openType="item.openType"
              :hoverStartTime="item.hoverStartTime"
              :hoverStayTime="item.hoverStayTime"
              :hoverClass="item.hoverClass"
              :preIconType="item.preIconType"
              @click="chooseHandleFront(item)" 
              >slot传入内容</QSWavesButton>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <u-button type="primary" size="large" @click="submitSecond">
        <text class="icon iconfont icon-submit" style="padding-right: 10px"></text>
        提交
      </u-button>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
import QSWavesButton from '@/components/QS-WavesButton/QS-WavesButton.vue';
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  components: {
    QSWavesButton
  },
  props:{
    studentId: {
      type: String,
      default: ''
    },
  },
  data() {
    return{
      sideList: [
        {
          item: '头前引（探颈v）',
          bodyPart: '头颈部',
          project: '第二项',
          side: '侧面',
          itemDetail: false,
        },
        {
          item: '富贵包',
          bodyPart: '肩部',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '弓背',
          bodyPart: '背部',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '冀状肩胛',
          bodyPart: '背部',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '骨盆前倾',
          bodyPart: '骨盆',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '骨盆前移',
          bodyPart: '骨盆',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '膝超深',
          bodyPart: '膝部',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '圆肩(含胸)',
          bodyPart: '肩部',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '均正常',
          side: '侧面',
          project: '第二项',
          itemDetail: false,
        },
      ],
      frontList: [
        {
          item: '高低肩',
          bodyPart: '肩部',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '长短腿',
          bodyPart: '膝部',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '膝外翻',
          bodyPart: '膝部',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '内八字',
          bodyPart: '膝部',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '外八字',
          bodyPart: '膝部',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },
        {
          item: '均正常',
          side: '正面',
          project: '第二项',
          itemDetail: false,
        },

      ],
    }
  },
  onLoad(){
  },
  methods:{
    chooseHandleSide(val){
      if(val.item == '均正常'){
        this.sideList.map(item=>{
          if(item.item !== '均正常'){
            item.itemDetail = false
          }
        })
        setTimeout(() =>{
          val.itemDetail = true
        },1)
      }else{
        this.sideList.map(item=>{
          if(item.item == '均正常'){
            item.itemDetail = false
          }
        })
      }
      val.itemDetail = !val.itemDetail
    },
    chooseHandleFront(val){
      if(val.item == '均正常'){
        this.frontList.map(item=>{
          if(item.item !== '均正常'){
            item.itemDetail = false
          }
        })
        setTimeout(() =>{
          val.itemDetail = true
        },1)
      }else{
        this.frontList.map(item=>{
          if(item.item == '均正常'){
            item.itemDetail = false
          }
        })
      }
      val.itemDetail = !val.itemDetail
    },
    // 提交
    submitSecond(){
      let sideArr = this.sideList.filter(val=>{
        return val.itemDetail == false
      })
      let frontArr = this.frontList.filter(val=>{
        return val.itemDetail == false
      })
      if(sideArr.length == this.sideList.length || frontArr.length == this.frontList.length){
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'请先选择诊断', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
      }else{
        let sideBak = this.sideList.slice(0,-1)     
        let frontBak = this.frontList.slice(0,-1)     
        let arr = sideBak.concat(frontBak)
        let params = []
        arr.map(val=>{
          params.push({
            inspectId: hccmStore.getChooseInspectId(),
            studentId:this.studentId,
            project: val.project,
            item: val.item,
            side: val.side,
            itemDetail: val.itemDetail == true ? '是' : val.itemDetail == false ? '否' : '',
            bodyPart: val.bodyPart,
            level: '',
          })
        })
        console.log(params)
        
        mRequest.inspectDetailSave(params).then(res=>{
          console.log(res)
          this.$refs.message.show({
            type:'success', //String 默认default
            msg:'第二项信息保存成功', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:2000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/home/second/index'
            });
          }, 1000);
        })


      }
    },
    // 获取第一项体检详情
    getInspectDetailList(){
      let params = {
        inspectId: hccmStore.getChooseInspectId(),
        studentId:this.studentId,
        project:'第二项',
        limit:100,
        page: 1,
      }
      mRequest.inspectDetailList(params).then(res=>{
        console.log(res.data.records,222)
        let sideBak =  res.data.records.filter(val=>{
          return val.side = '侧面'
        })
        let sideBak2 = sideBak.filter(items=>{
          return items.itemDetail == '是'
        })
        let frontBak =  res.data.records.filter(val=>{
          return val.side = '正面'
        })
        let frontBak2 = frontBak.filter(items=>{
          return items.itemDetail == '是'
        })
        if(sideBak2.length == 0){
          this.sideList[this.sideList.length - 1].itemDetail = true
        }else{
          sideBak.map(items=>{
            this.sideList.map(itm =>{
              if(items.item == itm.item){
                itm.itemDetail = items.itemDetail == '是' ? true : items.itemDetail == '否' ? false : ''
              }
            })
          })
        }
        if(frontBak2.length == 0){
          this.frontList[this.frontList.length - 1].itemDetail = true
        }else{
          frontBak.map(items=>{
            this.frontList.map(itm =>{
              if(items.item == itm.item){
                itm.itemDetail = items.itemDetail == '是' ? true : items.itemDetail == '否' ? false : ''
              }
            })
          })
        }
        console.log(this.frontList,2222)
      })
    },
  }
};
</script>

<style lang="scss">
.second2{
  font-size: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .bottom-inner{
    padding: 0 ;
    margin: 0 !important;
    background: #fff;
    border-radius: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    .bottom-title{
      font-size: 18px;
      color: #333;
      font-weight: 600;
      position: relative;
      text-indent: 10px;
      margin: 10px 0 14px 0;
    }
    .bottom-title:before{
      content: '';
      height: 80%;
      width: 4px;
      background: $u-primary;
      position: absolute;
      left: 0;
      top: 5%;
      border-radius: 4px;
    }

    .text-box{
      font-size: 16px;
      padding: 18px 0;
      .text-box-title{
        color: #333;
      }
    }
  }

  .second-content{
    display: flex;
    justify-content: space-between;
    flex: 1;
    .left{
      height: 100% !important;
      overflow: auto;
      flex: 0 0 48%;
      .second-title{
        text-align: left;
      }
    }
    .right{
      height: 100% !important;
      overflow: auto;
      flex: 0 0 48%;
    }
  }

  .bottom-box{
    height: 60px;
    padding-top: 10px;
    margin: 0 !important;
    .u-button{
      width: fit-content;
      padding: 0 80px;
      font-size: 16px;
    }
  }
}

</style>